<template>
  <div>
    <van-nav-bar title="影院" ref="navbar" @click-left="handleLeft" @click-right="handleRight">
      <template #left>
       {{$store.state.cityName}} <van-icon name="arrow-down" />
      </template>
      <template #right>
        <van-icon name="search" size="24" color="black"/>
      </template>
    </van-nav-bar>

    <div class="box">
      <ul>
        <li v-for="data in $store.state.cinemaList" :key="data.cinemaId">
          <div class="left">
            <div class="cinema_name">{{ data.name }}</div>
            <div class="cinema_text">{{ data.address }}</div>
          </div>

          <div class="right cinema_name">
            <div style="color: red">￥{{ data.lowPrice / 100 }}起</div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>

// import BetterScroll from 'better-scroll'
import {mapState} from 'vuex'
export default {
  data() {
    return {
      height: "100px",
    };
  },
  computed:{
    ...mapState(['cinemaList'])

  },
  mounted() {
    
// dispatch 分发
// 加个if 如果错在数据就不在发数据  使用了缓存 没有使用ajax 
    if(this.cinemaList.length === 0){
          this.$store.dispatch('getCinemaData',this.$store.state.cityId)
    }

    // http({
    //   url: `/gateway?cityId=${this.$store.state.cityId}&ticketFlag=1&k=9755784`,
    //   headers: {
    //     "X-Host": "mall.film-ticket.cinema.list",
    //   },
    // }).then((res) => {
    //   // console.log(res.data.data.cinemas)
    //   this.cinemaList = res.data.data.cinemas;

    //   /* 已经上完树之后再引入betterscroll */
    //   // this.$nextTick(() => {
    //   //   new BetterScroll('.box',{
    //   //     scrollbar:{
    //   //       fade:true
    //   //     }
    //   //   })
    //   // })
    // });
  },
  methods: {
   handleLeft(){
    //  console.log("left");
    this.$router.push('/city')

    // 切换城市 直接把之前缓存的清空 cinemalist
    this.$store.commit('clearCinmaData')
   },
   handleRight(){
     this.$router.push('/cinemas/search')
   }
  },
};
</script>

<style lang="scss" scoped>
li {
  padding: 0.8333rem;
  display: flex;
  justify-content: space-between;
  .left {
    width: 11.7778rem;
  }

  .cinema_text {
    color: #797d82;
    font-size: 12px;
    margin-top: 5px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .cinema_name {
    font-size: 15px;
  }
}

// .box{
//     height: 22.2222rem;
//     overflow: hidden;
//     position: relative;
// }
</style>
